<template>
  <!--菜单-->
  <el-menu
    ref="domMenu"
    :default-active="index"
    class="el-menu-vertical-demo"
    @select="select"
    @open="handleOpen"
    @close="handleClose">
      <el-submenu
        v-for="item in menu.filter(a => a.parentId===0)"
        :key="'menu_' + item.id"
        :index="item.id"
      >
        <template #title>
          <i :class="item.icon"></i>
          <span>{{item.title}}</span>
        </template>
        <el-menu-item-group>
          <el-menu-item
            v-for="item2 in menu.filter(a => a.parentId===item.id)"
            :key="'submenu_' + item2.id"
            :index="item2.id"
          >{{item2.title}}</el-menu-item>
        </el-menu-item-group>
      </el-submenu>
  </el-menu>
</template>

<script>
// 模块菜单
import { onMounted, watch, ref } from 'vue'
import { useRouter } from 'vue-router'

// 状态
import VueDS from 'vue-data-state'

</script>

<script setup>
// 菜单数据
// eslint-disable-next-line import/no-absolute-path
import { menu } from '/jsonCRUD/menu.json'

const props = defineProps({
  getModuleId: Function
})

// 访问状态
const { get } = VueDS.useStore()
// 注册 tab 的状态
const tabState = get.tabState()
tabState.menu = menu

const router = useRouter()
const index = ref(100)
const domMenu = ref(null)

onMounted(() => {
  domMenu.value.open('100')
  domMenu.value.open('101')
})

watch(() => index, () => {
  // console.log('当前激活节点', index)
})

const select = (index, indexPath) => {
  console.log('当前激活节点11', index, indexPath)
  // 获取菜单信息
  const currMenu = menu.filter((a) => a.id === index)[0]

  // 设置状态
  tabState.trigger = 'menu'
  tabState.activeId = parseInt(index)
  router.push({ name: currMenu.routeName, params: { moduleId: index } })

  props.getModuleId(index)
}

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}

const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}

</script>
